import React, { useState } from 'react';
import {
  Message,
  ActionSheet,
  Spinning,
  Modal,
  Switch,
  RadioGroup,
  Radio,
} from '@/design';
import styles from './discover.less';

const PDiscover: React.FC = () => {
  const [checked, setChecked] = useState<boolean>(false);
  const [gendar, setGendar] = useState<string>('male');

  const onChange = (e: any) => {
    setGendar(e.target.valu);
  };

  return (
    <div className={styles.wrap}>
      <h3>轻提示</h3>
      <div className={styles.msg_btn}>
        <button
          type="button"
          onClick={() => {
            Message.info('这是一个简单的信息');
          }}
        >
          轻提示 - 信息
        </button>
        <button
          type="button"
          onClick={() => {
            Message.success('这是一个成功提示');
          }}
        >
          轻提示 - 成功
        </button>
        <button
          type="button"
          onClick={() => {
            Message.warn('这是一个警告');
          }}
        >
          轻提示 - 警告
        </button>
        <button
          type="button"
          onClick={() => {
            Message.error('这是一个错误');
          }}
        >
          轻提示 - 错误
        </button>
        <button
          type="button"
          onClick={() => {
            Message.loading('需要主动关闭的loading');
          }}
        >
          轻提示 - loading
        </button>
      </div>
      <h3>弹窗</h3>
      <div className={styles.msg_btn}>
        <button
          type="button"
          onClick={() => {
            Modal.alert({ content: '提示info', text: '我已经阅读' });
          }}
        >
          modal - alert
        </button>
        <button
          type="button"
          onClick={() => {
            Modal.confirm({
              title: '删除提示',
              content: 'Are you sure???',
              yes: () =>
                new Promise(resolve => {
                  Message.info({ showIcon: true, content: 'yes一秒后关闭' });
                  setTimeout(resolve, 1000);
                }),
              no: () => {
                console.log('no');
              },
              // maskClosable: true //默认是false
            });
          }}
        >
          modal - confirm
        </button>
        <button
          type="button"
          onClick={() => {
            Modal.prompt({
              content: '提示info',
              inputDefaultValue: '12',
              placeholder: '請輸入內容',
              yes: (value: string) => {
                return new Promise(resolve => {
                  Message.info({ content: `你輸入的是：${value}` });
                  setTimeout(resolve, 1000);
                });
              },
            });
          }}
        >
          modal - prompt
        </button>
        <button
          type="button"
          onClick={() => {
            let hideFn = ActionSheet.show({
              list: [1, 2, 3],
              onSelect: res => {
                Message.info({
                  content: `选择：${res}`,
                });
                hideFn.hide();
              },
            });
            // setTimeout(hideFn.hide, 3000)
          }}
        >
          action sheet
        </button>
      </div>
      <h3>loading</h3>
      <div className={styles.spin_box}>
        <button type="button" className={styles.full}>
          <Spinning type="colors" size={16} />
        </button>
        <button type="button">
          <Spinning type="bounce" size={28} state="dark" />
        </button>
        <button type="button">
          <Spinning type="circle" size={28} state="dark" />
        </button>
        <button type="button">
          <Spinning type="bounce" size={28} />
        </button>
        <button type="button">
          <Spinning type="circle" size={28} />
        </button>
      </div>
      <div className={styles.radio_box}>
        <div>
          <Switch onChange={() => setChecked(!checked)} checked={checked} />
        </div>
        <div>
          <RadioGroup
            name="gender"
            defaultSelected={gendar}
            onChange={onChange}
          >
            <Radio label="男" value="male">
              男
            </Radio>
            <Radio label="女" value="female">
              女
            </Radio>
          </RadioGroup>
        </div>
      </div>
      {/* <Switch onChange={() => setChecked(!checked)} checked={checked} /> */}
    </div>
  );
};

export default PDiscover;
